<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="lib/vue.global.js"></script>
</head>
<body>
  <div id="root">
    {{ title }}
    <my-app></my-app>
  </div>
</body>
<script>
  // Vue3的实例中没有el选项
  // Vue3 innerHTML  Vue2 outerHTML
  const { createApp, h } = window.Vue
  const app = createApp({
    data () {
      return {
        title: 'hello'
      }
    },
    unmounted () {
       console.log('unmounted')
    },
    // render() {
    //   return h('my-app') 
    // }
  })
  app.component('MyApp', {
    template: `<div id="app">app</div>`
  })
  let vm = app.mount('#root') // 挂载
  app.unmount() // 基于app   用于销毁节点
  vm.title = 'hi'

  // react
  // componentWillMount 挂载
  // componentWillUnmount 销毁
</script>
</html>